<template>
  <!-- /**
** @descerpion:这是柱状图，由于后期颜色样式会与折线图
 */ -->
  <div style="width: 100%; height: 90%" class="linebox">
    <Echart id="linebarchart" :options="options" />
  </div>
</template>

<script>
import Echart from "../baseMain/index.vue";
export default {
  components: {
    Echart
  },
  props: {
    linebarData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    };
  },
  watch: {
    linebarData: {
      handler(newData) {
        let newPromise = new Promise((resolve) => {
          resolve();
        });
        // 然后异步执行echarts的初始化函数
        newPromise.then(() => {
          //	此dom为echarts图标展示dom
          this.options = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999"
                }
              }
              // formatter: '{b0}年</br>{a0}: {c0}万公斤  </br> {a1}: {c1}% ',
            },
            title: {
              left: "center",
              textStyle: {
                // 图例文字的样式
                color: "#fff",
                fontSize: 14
              },
              text: newData.nowData
            },
            grid: {
              left: "20",
              right: "20",
              bottom: "10%",
              top: "30%",
              containLabel: true
            },
            dataZoom: [
              {
                type: "slider",
                show: false,
                xAxisIndex: [0],
                handleSize: 4, // 滑动条的 左右2个滑动条的大小，圆球大小
                start: 0, // 数据窗口范围的起始百分比,表示0%
                end: 100, // 数据窗口范围的结束百分比,表示100%
                height: 3, // 组件高度
                left: 50, // 左边的距离
                right: 40, // 右边的距离
                bottom: 10, // 底部的距离
                handleColor: "#ddd", // h滑动图标的颜色
                handleStyle: {
                  borderColor: "#cacaca",
                  borderWidth: "1",
                  shadowBlur: 2,
                  background: "#ddd",
                  shadowColor: "#ddd"
                },
                fillerColor: "#1d8ef3",
                backgroundColor: "#ddd", // 两边未选中的滑动条区域的颜色
                showDataShadow: false, // 是否显示数据阴影 默认auto
                showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
                handleIcon:
                  "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
                filterMode: "filter"
              },
              // 下面这个属性是里面拖到
              {
                type: "inside",
                show: true,
                xAxisIndex: [0]
              }
            ],
            color: [newData.color],
            xAxis: [
              {
                type: "category",
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#1d6876f7" // 颜色
                  }
                },
                data: newData.xAxisdata,
                axisPointer: {
                  type: "shadow"
                },
                axisLabel: {
                  show: true,
                  color: "#e2e2e2"
                },
                axisLine: {
                  lineStyle: {
                    color: "#1d6876f7", // 颜色
                    width: 1 // 粗细
                  }
                }
              }
            ],
            yAxis: [
              {
                type: "value",
                name: "",
                min: 0,
                splitLine: {
                  show: false
                },
                axisLabel: {
                  formatter: "{value} ",
                  show: true,
                  color: "#fff"
                },
                axisLine: {
                  lineStyle: {
                    color: "#1d6876f7", // 颜色
                    width: 2 // 粗细
                  }
                }
              }
            ],
            series: newData.seriesData
          };
        });
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
.linebox {
  border: 1px solid #1d6876f7;
}
</style>
